<template>
  <div class="tobeDone">
    <tableIndex
      ref="tableIndexRef"
      :tableData="tableData"
      :tableHead="tableHead"
      :isIndex="true"
      :isSelection="true"
      :isRadio="false"
      :fields="state.fields"
      :height="500"
      :page="state.page"
      @selectChange="selectChange"
      @searchList="searchList"
      @page-change="pageChange"
      @resetList="resetList"
    >
      <!-- 搜索组件插槽 -->
      <template #individuation>
        <el-form-item label="预算科目">
          <el-cascader
            class="m-l5"
            v-model="state.searchParam.name"
            :show-all-levels="false"
            :props="props"
          />
        </el-form-item>
      </template>

      <template #btns> </template>
    </tableIndex>
  </div>
</template>

<script setup>
import TableIndex from '@/components/table/index.vue'
// import infodialog from './components/dialog.vue'
import { fundManagementApi } from '@/api/businessFinance'
import { fundApi } from '@/api/project'
import { ref, onMounted, reactive } from 'vue'
const state = reactive({
  searchParam: {
    name: ''
  },
  page: {
    page: 1,
    pageSize: 10,
    total: 0
  },
  fields: [
    { key: 'keywords', label: '关键字', type: 'input',placeholder: '请输入关键字' },
    { key: 'year', label: '年度', type: 'input',placeholder: '请输入年度' },
    {
      key: 'quarter',
      label: '季度',
      type: 'select',
      options: {
        list: [
          { label: '第一季度', value: 1 },
          { label: '第二季度', value: 2 },
          { label: '第三季度', value: 3 },
          { label: '第四季度', value: 4 }
        ]
      }
    },
    {
      key: 'moneyFlow',
      label: '资金走向',
      type: 'select',
      options: {
        list: [
          {
            label: '流入',
            value: 1
          },
          {
            label: '流出',
            value: -1
          }
        ]
      }
    }
  ]
})
// const info = ref(null)
const tableData = ref([])
const tableHead = ref([
  {
    prop: 'projectName',
    label: '项目名称'
  },
  {
    prop: 'projectId',
    label: '项目编号'
  },
  {
    prop: 'contractName',
    label: '合同名称'
  },
  {
    prop: 'subjectName',
    label: '预算科目'
  },
  {
    prop: 'moneyFlow',
    label: '资金流向',
    formatter: (row) => {
      return row.moneyFlow == 1 ? '流入' : '流出'
    }
  },
  {
    prop: 'year',
    label: '年度'
  },
  {
    prop: 'quarter',
    label: '季度',
    formatter: (row) => {
      return row.quarter == '1'
        ? '第一季度'
        : row.quarter == '2'
        ? '第二季度'
        : row.quarter == '3'
        ? '第三季度'
        : '第四季度'
    }
  },
  {
    prop: 'accessAmount',
    label: '已批预算金额',
    minWidth: 100,
  },
  {
    prop: 'executeAmount',
    label: '已执行金额',
    minWidth: 100,
  }
])
const budgetSubjectList = ref([])
const props = {
  lazy: true,
  emitPath: false,
  async lazyLoad(node, resolve) {
    const { level } = node
    try {
        if (level === 0) {
            await getBudgetSubjectList({
                subjectId: '',
                subjectType: '1'
            })
            let nodes = []
            budgetSubjectList.value.forEach((item) => {
                nodes.push({
                    value: item.subjectId,
                    label: item.subjectName,
                    leaf: level >= 4
                })
            })
            resolve(nodes)
        }
        if (level > 0 && level < 5) {
            await getBudgetSubjectList({
                subjectId: node.value,
                subjectType: '1'
            })
            let nodes = []
            budgetSubjectList.value.forEach((item) => {
                nodes.push({
                    value: item.subjectId,
                    label: item.subjectName,
                    leaf: level >= 4
                })
            })
            resolve(nodes)
        }
    }catch (e) {
        let nodes = [];
        resolve(nodes);
    }

  }
}
const selectChange = (e) => {
  console.log(e)
}
const getBudgetSubjectList = async (param) => {
  return await fundManagementApi.getBudgetSubjectList(param).then((res) => {
    budgetSubjectList.value = res.data
  })
}
const projectProposal = (row) => {
  // info.value.state.centerDialogVisible = true
}
//搜索接口请求
const searchList = (e) => {
  if (state.searchParam.name) {
    e.subjectId = state.searchParam.name
  }

  getPage(e)
}
const resetList = (e) => {
  state.searchParam.name = ''
  getPage()
}
//分页变化
const pageChange = (e) => {
  state.page.page = e.page
  state.page.pageSize = e.limit
  getPage()
}
const getPage = (e) => {
  let searchObje = getSearch()
  if (state.searchParam.name) {
    searchObje.subjectId = state.searchParam.name
  }
  let obj = {
    pageNum: state.page.page,
    pageSize: state.page.pageSize,
    param: {
      ...searchObje
    }
  }
  fundApi.getDetailPageList(obj).then((res) => {
    if (res.code == '200') {
      tableData.value = res.data.content
      state.page.total = res.data.totalSize
    }
  })
}
let tableIndexRef = ref(null)
//获取列表组件搜索数据
const getSearch = () => {
  return tableIndexRef.value.getSearchData()
}
onMounted(() => {
  getPage()
})
</script>

<style lang="scss" scoped>
.tobeDone {
  width: 100%;
}
</style>
